import { CommonSmallTitle } from '../Other/SmallTitle'
import { message, Modal, Result, Button } from 'antd'
import { useEffect, useState } from 'react'
import { Player, BigPlayButton } from 'video-react'
import { useBoolean, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { ICON } from '../../../../Common/Configure/Icon'
import { ModalBox } from '../../../../Common/Modal/ModalBox'

// 附件列表
export const AttachmentList = ({ data, className, Off }) => {
    const [ViewState, { setTrue: ViewStateTrue, setFalse: ViewStateFalse }] = useBoolean(false)
    const [AttList, setAttList] = useState()
    return (
        <>
            <Modal
                className="LargeScreenTablesModal"
                open={true}
                onCancel={Off}
                footer={null}
                destroyOnClose={true}
                width="80vw"
                keyboard={false}
                maskClosable={false}
                maskStyle={{ background: 'rgba(0,0,0,0.8)' }}
            >
                <CommonSmallTitle className={`${className} TwoModal`} title="附件列表" flex={1}>
                    <div className="AttachmentList">
                        <div className="Title">
                            <div>主题</div>
                            <div>操作</div>
                        </div>
                        <div className="List">
                            {data.map(({ uuid, fileUrl, tableName, attachment }) => (
                                <div
                                    key={uuid}
                                    onClick={() => {
                                        setAttList({ uuid, fileUrl, tableName, attachment })
                                        ViewStateTrue()
                                    }}
                                >
                                    <div>{tableName}</div>
                                    <div>
                                        <div>查看附件</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </CommonSmallTitle>
            </Modal>
            {ViewState && AttList && <AttachmentDetail data={AttList} className={className} Off={ViewStateFalse} />}
        </>
    )
}
// 附件详情
export const AttachmentDetail = ({ data, className, Off }) => {
    console.log('数据', data)
    const ImageBox = ({ url }) => <img src={url} alt={url} />
    const PdfBox = ({ url }) => <embed src={url} style={{ height: '100%', width: '100%' }} />
    const VideoBox = ({ url }) => (
        <Player fluid={false} width={'100%'} height={'100%'} playsInline src={url}>
            <BigPlayButton position="center" />
        </Player>
    )
    const OtherBox = ({ url }) => (
        <Result
            status="500"
            title="文件格式不支持预览"
            extra={
                <Button type="primary" onClick={() => window.open(url)}>
                    下载附件
                </Button>
            }
        />
    )

    const [type, setType] = useState('ImageBox')
    const AttachmentList = {
        ImageBox,
        PdfBox,
        VideoBox,
        OtherBox,
    }
    useEffect(() => {
        const fileUrl = data.fileUrl || data.fileUrl === '' ? data.fileUrl : data.attachment.fileUrl
        if (!fileUrl) {
            setType('OtherBox')
        } else {
            var suffix = fileUrl.substring(fileUrl.lastIndexOf('.') + 1).toLowerCase()
            if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'jpeg') {
                setType('ImageBox')
            } else if (suffix === 'pdf') {
                setType('PdfBox')
            } else if (suffix === 'mp4') {
                setType('VideoBox')
            } else if (fileUrl.indexOf('jihei-api.ljkjkf.com/attachmentSecurity/image/') !== -1) {
                setType('ImageBox')
            } else {
                setType('OtherBox')
            }
        }
    }, [Off, data])
    return (
        <Modal
            className="LargeScreenTablesModal"
            open={true}
            onCancel={Off}
            footer={null}
            destroyOnClose={true}
            width="80vw"
            keyboard={false}
            maskClosable={false}
            maskStyle={{ background: 'rgba(0,0,0,0.8)' }}
        >
            <CommonSmallTitle className={`${className} TwoModal`} title="附件" flex={1}>
                <div className="AttachmentDetail">
                    {(() => {
                        const Template = AttachmentList[type]
                        return <Template url={data?.fileUrl || data?.attachment?.fileUrl} />
                    })()}
                </div>
            </CommonSmallTitle>
        </Modal>
    )
}
// 安全巡检详情
export const InspectionDetailsBox = ({ data, Off, className, type }) => {
    // const [AttachmentDetailState, { setTrue, setFalse }] = useBoolean(false)
    // const [AttachmentDetailData, setAttachmentDetailData] = useState()
    // const [AttachmentList, setAttachmentList] = useState([])
    // const [DetailsList, setDetailsList] = useState([])
    // const [ActiveDetails, setActiveDetails] = useState()
    // const [DetailsAttachment, setDetailsAttachment] = useState([])

    const [DataDetails, setDataDetails] = useState()
    const [OptionsCall, setOptionsCall] = useState()

    const [StateList] = useState({
        0: { title: '未整改', icon: ICON['IconAZuobiaoyoushujubeifen7'], color: '#48e482' },
        1: { title: '整改中', icon: ICON['IconAZuobiaoyoushujubeifen5'], color: '#81e23a' },
        2: { title: '已整改', icon: ICON['IconAZuobiaoyoushujubeifen3'], color: '#3ac0e2' },
        3: { title: '合格', icon: ICON['IconAZuobiaoyoushujubeifen4'], color: '#8a9db1' },
        4: { title: '不合格', icon: ICON['IconAZuobiaoyoushujubeifen6'], color: '#dce23a' },
    })

    // 安全巡检

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            setDataDetails(res[0])
        },
    })

    useEffect(() => {
        if (type === 'security') {
            runAsync({ url: 'getSecurityAllInfoByUuid', data: { uuid: data.uuid } })
        } else {
            console.log('质量巡检')
        }
    }, [data, type, runAsync])

    // console.log(data)

    return (
        <Modal
            className="LargeScreenTablesModal"
            open={true}
            onCancel={Off}
            footer={null}
            destroyOnClose={true}
            width="80vw"
            keyboard={false}
            maskClosable={false}
        >
            <CommonSmallTitle className={`${className} TwoModal`} title="巡检详情" flex={1}>
                {DataDetails && (
                    <div className="InspectionDetailsBox">
                        <div className="top">
                            <div>
                                <div>{DataDetails.tableName}</div>
                                <div style={{ color: StateList[DataDetails.auditStatus].color }}>
                                    {StateList[DataDetails.auditStatus].icon}
                                    <div>{StateList[DataDetails.auditStatus].title}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>下单人员 :</div>
                                    <div>{DataDetails.createUserName}</div>
                                </div>
                                <div>
                                    <div>整改人员 :</div>
                                    <div>{DataDetails.organizationName}</div>
                                </div>
                                <div>
                                    <div>安全类型 :</div>
                                    <div>{DataDetails.securityProblemTypeName}</div>
                                </div>
                                <div>
                                    <div>整改分数 :</div>
                                    <div>{DataDetails.score}</div>
                                </div>
                                <div>
                                    <div>整改天数 :</div>
                                    <div>{DataDetails.limitDays}</div>
                                </div>
                                <div>
                                    <div>巡检时间 :</div>
                                    <div>{DataDetails.securityDate}</div>
                                </div>
                                <div>
                                    <div>审核人员 :</div>
                                    <div>{DataDetails.updateUserName}</div>
                                </div>
                                <div>
                                    <div>审核时间 :</div>
                                    <div>{DataDetails.updateTime}</div>
                                </div>
                                <div>
                                    <div>问题描述 :</div>
                                    <div>{DataDetails.problem}</div>
                                </div>
                            </div>
                            {DataDetails.securityAttachmentList.length !== 0 && (
                                <div className="Attachment">
                                    {DataDetails.securityAttachmentList.map(({ uuid, originalName, fileUrl }) => (
                                        <div
                                            key={uuid}
                                            onClick={() => setOptionsCall({ type: 'Annex', data: { url: fileUrl } })}
                                        >
                                            {ICON['chakan']}
                                            <div>{originalName}</div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                        {DataDetails.securityDetailList.lenght !== 0 && (
                            <div className="Bottom">
                                <div>整改信息</div>
                                <div>
                                    {DataDetails.securityDetailList.map(
                                        ({
                                            uuid,
                                            tableName,
                                            description,
                                            securityDetailDate,
                                            securityDetailAttachmentList,
                                        }) => (
                                            <div key={uuid}>
                                                <div>
                                                    <div>{tableName}</div>
                                                    <div>{securityDetailDate}</div>
                                                </div>
                                                <div className="Details">
                                                    <div>
                                                        <div>
                                                            <div>整改描述 :</div>
                                                            <div>{description}</div>
                                                        </div>
                                                    </div>
                                                    {securityDetailAttachmentList.length !== 0 && (
                                                        <div className="Attachment">
                                                            {securityDetailAttachmentList.map(
                                                                ({ uuid, originalName, fileUrl }) => (
                                                                    <div
                                                                        key={uuid}
                                                                        onClick={() =>
                                                                            setOptionsCall({
                                                                                type: 'Annex',
                                                                                data: { url: fileUrl },
                                                                            })
                                                                        }
                                                                    >
                                                                        {ICON['chakan']}
                                                                        <div>{originalName}</div>
                                                                    </div>
                                                                ),
                                                            )}
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        ),
                                    )}
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </CommonSmallTitle>
            <ModalBox OptionsCall={OptionsCall} />
        </Modal>
    )
}
export const ApiAttachmentButton = ({ data }) => {
    const { title } = data
    const [DetailsState, { setTrue, setFalse }] = useBoolean(false)
    return (
        <>
            <Button type="link" onClick={setTrue}>
                {title}
            </Button>
            {DetailsState && <ApiAttachmentList data={data} Off={setFalse} />}
        </>
    )
}

// 附件列表
export const ApiAttachmentList = ({ data, Off }) => {
    const { className, title, url, param, uuid } = data
    const [FileList, setFileList] = useState([])
    const { runAsync: getFileList } = useRequest(Http, {
        manual: true,
        onSuccess: res => setFileList(res.list),
    })

    useEffect(() => {
        getFileList({ url, data: { [param]: uuid } })
    }, [getFileList, param, url, uuid])

    return (
        <Modal
            className="LargeScreenTablesModal"
            open={true}
            onCancel={Off}
            footer={null}
            destroyOnClose={true}
            width="80vw"
            keyboard={false}
            maskClosable={false}
            maskStyle={{ background: 'rgba(0,0,0,0.8)' }}
        >
            <CommonSmallTitle className={`${className} TwoModal`} title={title} flex={1}>
                {FileList.length === 1 ? (
                    <FilesBox url={FileList[0]?.fileUrl || FileList[0]?.attachment?.fileUrl} />
                ) : (
                    <FilesArrBox className={className} data={FileList} />
                )}
            </CommonSmallTitle>
        </Modal>
    )
}

export const FilesBox = ({ url }) => {
    const ImageBox = ({ url }) => <img src={url} alt={url} />
    const PdfBox = ({ url }) => <embed src={url} style={{ height: '100%', width: '100%' }} />
    const VideoBox = ({ url }) => (
        <Player fluid={false} width={'100%'} height={'100%'} playsInline src={url}>
            <BigPlayButton position="center" />
        </Player>
    )
    const OtherBox = ({ url }) => (
        <Result
            status="500"
            title="文件格式不支持预览"
            extra={[
                <Button type="primary" onClick={() => window.open(url)}>
                    网页打开
                </Button>,
            ]}
        />
    )

    const [type, setType] = useState('ImageBox')
    const AttachmentList = {
        ImageBox,
        PdfBox,
        VideoBox,
        OtherBox,
    }
    useEffect(() => {
        const fileUrl = url
        if (!fileUrl) {
            setType('OtherBox')
        } else {
            var suffix = fileUrl.substring(fileUrl.lastIndexOf('.') + 1).toLowerCase()
            if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'jpeg') {
                setType('ImageBox')
            } else if (suffix === 'pdf') {
                setType('PdfBox')
            } else if (suffix === 'mp4') {
                setType('VideoBox')
            } else {
                setType('OtherBox')
            }
        }
    }, [url])

    return (
        <div className="AttachmentDetail">
            {(() => {
                const Template = AttachmentList[type]
                return <Template url={url} />
            })()}
        </div>
    )
}

export const FilesArrBox = ({ className, data }) => {
    const [ViewState, { setTrue: ViewStateTrue, setFalse: ViewStateFalse }] = useBoolean(false)
    const [AttList, setAttList] = useState()
    return (
        <div className="AttachmentList">
            <div className="Title">
                <div>主题</div>
                <div>操作</div>
            </div>
            <div className="List">
                {data.map(({ uuid, fileUrl, tableName, attachment }) => (
                    <div
                        key={uuid}
                        onClick={() => {
                            setAttList({ uuid, fileUrl, tableName, attachment })
                            ViewStateTrue()
                        }}
                    >
                        <div>{tableName}</div>
                        <div>
                            <div>查看附件</div>
                        </div>
                    </div>
                ))}
            </div>
            {ViewState && AttList && <AttachmentDetail data={AttList} className={className} Off={ViewStateFalse} />}
        </div>
    )
}
